<template>
    <div>
        <search-bar></search-bar>
        <!-- 轮播图 -->
        <swiper indicator-dots=true autoplay interval=3000 circular>
            <swiper-item v-for="(item, index) in swiperData" :key='index'>
                <image :src="item.image_src" class="lunbo"></image>
            </swiper-item>   
        </swiper>
        <!-- 菜单 -->
        <div class="menu">
            <div :key='index' v-for='(item, index) in menuData' class="menu-item">
                <image :src='item.image_src'></image>
            </div>
        </div>
        <!-- 商品列表 -->
        <div class="floor" :key='index' v-for="(item, index) in floorData1">
            <div class="floor-title">
                <img :src="item.floor_title.image_src">
            </div>
            <div class="floor-content">
                <div class="left">
                    <img :src="item.leftImagePath" alt="">
                </div>
                <div class="right">
                    <img :key="i" v-for="(img, i) in item.product_list" :src="img.image_src">
                </div>
            </div>
        </div>
        <!-- 回到顶部按钮 -->
        <div class="top" v-show="flag" @click="toTop">
            ︿
            <p>顶部</p>
        </div>
    </div>
</template>

<script>
import request from '../../utils/request'
import SearchBar from '../../components/SearchBar.vue'
export default {
    components: {
      'search-bar': SearchBar
    },
    data() {
        return {
            // 提供轮播图数据
            swiperData: [],
            // 菜单数据
            menuData: [],
            // 商品列表数据
            floorData: [],
            flag: false
        }
    },
    computed: {
        floorData1 () {
        // 对原有数据进行加工(把5张图片变成4张)
        return this.floorData.map(item=>{
            // 左侧大图的地址
            item.leftImagePath = item.product_list[0].image_src
            // 右侧图片预留4张
            item.product_list = item.product_list.filter((item,index)=>{
            // 去掉第一张
            return index > 0
            })
            return item;
        })
        }
    },
    methods: {
        toTop() {
            wx.pageScrollTo({
                scrollTop: 0
            })
        },
        async initData() {
            // 轮播图数据
            let swiperRes = await request('home/swiperdata')
            this.swiperData = swiperRes.data.message
            // 菜单数据
            let menuRes = await request('home/catitems')
            this.menuData = menuRes.data.message
            // 商品列表数据
            let floorRes = await request('home/floordata')
            this.floorData = floorRes.data.message
        }
    },
    created() {
        // 获取轮播图数据
        // mpvue.request({
        //     url:'https://www.ehomespace.com/api/public/v1/home/swiperdata',
        //     method: 'get',
        //     success: (res) => {
        //         this.swiperData = res.data.message
        //     }
        // }),
        // 获取菜单数据
        // mpvue.request({
        //     url:'https://www.ehomespace.com/api/public/v1/home/catitems',
        //     method: 'get',
        //     success: (res) => {
        //         this.menuData = res.data.message
        //     }
        // })
        this.initData()
    },
    onPullDownRefresh () {
    // 下拉刷新时触发，从新获取页面相关后台数据
        this.initData()
    },
    onPageScroll (param) {
    // 页面滚动时触发
    // console.log(param.scrollTop)
    this.flag = param.scrollTop > 50
  }
}
</script>
 
<style scoped lang='less'>


.lunbo {
  width: 750rpx;
}

.menu {
  margin-top: 10rpx;
  display: flex;
  .menu-item {
    flex: 1;
    image {
      width: 180rpx;
      height: 170rpx;
    }
  }
}

.floor {
  margin-top: 10rpx;
  .floor-title {
    width: 750rpx;
    img {
      height: 80rpx;
    }
  }
  .floor-content {
    display: flex;
    .left {
      img {
        width:232rpx;
        height:385rpx;
      }
    }
    .right {
      flex: 1;
      flex-wrap: wrap;
      img {
        width:232rpx;
        height:188rpx;
        padding: 0 10rpx;
      }
    }
  }
}

.top {
  position: fixed;
  bottom: 50rpx;
  right: 50rpx;
  border-radius: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #fff;
  text-align: center;
  font-size: 14px;
}
</style>
